<template>
  <div class="creatingMultimedia" v-loading="loading">
    <div class="creatingMultimedia_top">
      <div class="text">{{ Multimedia }}</div>
      <div class="button">
        <el-button @click="preserve('form')" type="primary" style="background-color: #0f40f5" v-loading="sureLoading">确定
        </el-button>
        <el-button @click="openbuton">取消</el-button>
      </div>
    </div>
    <div class="creatingMultimedia_content">
      <el-form ref="form" :model="form" label-width="80px" class="demo-ruleForm" :rules="rules">
        <el-form-item label="素材名称" prop="materialName">
          <el-input style="width: 50%" v-model="form.materialName" placeholder="请输入名称,最多20个字"></el-input>
        </el-form-item>
        <el-form-item label="个人分组" prop="categoryId" v-show="!this.form.contentId">
          <el-select style="width: 50%" v-model="form.categoryId" placeholder="请选择分组">
            <el-option v-for="item in Individualgroup" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业分组" v-show="this.form.contentId" prop="categoryId">
          <el-select v-model="form.categoryId" style="width: 50%" placeholder="请选择">
            <el-option v-for="item in Enterprisegrouping" :key="item.flag" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="素材类型" prop="content">
          <el-select v-model="form.content" style="width: 50%" placeholder="请选择" @change="handleChange">
            <el-option v-for="item in Materialtype" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="NameJudge" prop="imgUrl" v-if="calibration == '5' || this.form.content == '5'">
          <el-upload action :limit="1" :show-file-list="false" :before-upload="beforeUpload">
            <div>
              <img v-if="!appear" :src="form.imgUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item :label="NameJudge" prop="imgUrl" v-if="calibration == '6' || this.form.content == '6'">
          <el-upload action :limit="1" :show-file-list="false" :before-upload="uploadVideo">
            <el-button size="small" type="primary">点击上传</el-button>
            <div v-if="!appear">{{ form.fileName }}</div>
            <div slot="tip" class="el-upload__tip">
              只能上传mp4文件，且不超过200MB
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item :label="NameJudge" prop="imgUrl" v-if="calibration == '7' || this.form.content == '7'">
          <el-upload action :limit="1" :show-file-list="true" :before-upload="audioUpload">
            <el-button size="small" type="primary">点击上传</el-button>
            <div v-if="!appear">{{ form.fileName }}</div>
            <div slot="tip" class="el-upload__tip">
              只能上传wav/mp3文件，且不超过20MB
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="其他设置" v-if="this.$route.query.is_person == 1">
          <el-checkbox v-model="form.checked" @change="synchronization(form.checked)">同步到企业库
          </el-checkbox>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { audioInterface, creatingMultimedia, uploadInterface, videoInterface } from '@/api/multimedia/creatingmultimedia.js'
import { createAccess, IndividualEditor, IndividualEditorCorp, multimediaGroup } from '@/api/multimedia/multimedia.js'

export default {
  data() {
    return {
      Multimedia: '创建多媒体',
      sureLoading: false,
      loading: true,
      domain: window.globalConfig.IMAGE_API,
      appear: true,
      imageUrl: '',
      form: {
        materialName: '',
        name: '',
        material: '',
        categoryId: '',
        checked: false,
        levelType: 1,
        mediaType: 7,
        materialUrl: '',
        content: '5',
        fileName: '',
        weUserId: '',
        isSync: '0',
        fileSize: '',
        imgUrl: ''
      },
      NameJudge: '图片上传',
      messageURL: '请选择图片',
      Individualgroup: [],
      Materialtype: [
        {
          value: '5',
          label: '图片'
        },
        {
          value: '6',
          label: '视频'
        }
        // {
        //   value: "7",
        //   label: "音频",
        // },
      ],
      calibration: '5',
      Enterprisegrouping: [],
      rules: {
        materialName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          {
            min: 3,
            max: 20,
            message: '长度在 3 到 20 个字符',
            trigger: 'blur'
          }
        ],
        name: [{ required: true, message: '请选择分组', trigger: 'change' }],
        content: [
          { required: true, message: '请选择素材类型', trigger: 'change' }
        ],
        categoryId: [
          { required: true, message: '请选择分组', trigger: 'change' }
        ],
        materialUrl: [
          { required: true, message: '请上传文件', trigger: 'change' }
        ],
        imgUrl: [{ required: true, message: '请上传文件', trigger: 'change' }]
      },
      sureloading: false
    }
  },
  methods: {
    handleChange(value) {
      this.form.materialUrl = ''
      this.appear = true
      this.calibration = value
      if (value === '5') {
        this.NameJudge = '图片上传'
        this.messageURL = '请上传图片'
      }
      if (value === '6') {
        this.NameJudge = '视频上传'
        this.messageURL = '请上传视频'
      }
      if (value === '7') {
        this.NameJudge = '音频上传'
        this.messageURL = '请上传音频'
      }
    },
    createAccess() {
      this.loading = true
      const data = {
        id: this.$route.query.id
      }
      createAccess(data)
        .then((res) => {
          this.form = res.data
          this.form.imgUrl = this.domain + res.data.materialUrl
          if (this.form.isSync === '1') {
            this.form.checked = true
          } else if (this.form.isSync === '0') {
            this.form.checked = false
          }
          this.appear = false
          if (this.form.content === '5') {
            this.calibration = '5'
            this.NameJudge = '图片上传'
          }
          if (this.form.content === '6') {
            this.calibration = '6'

            this.NameJudge = '视频上传'
          }
          if (this.form.content === '7') {
            this.calibration = '7'

            this.NameJudge = '音频上传'
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    IndividualEditor() {
      this.sureloading = true
      IndividualEditor(this.form)
        .then((res) => {
          this.$router.push({ name: 'Multimediamaterial', query: { is_person: this.$route.query.is_person } })
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          this.loading = false
          this.sureloading = false
        })
        .catch(() => {
          this.$message.error({
            message: '编辑失败'
          })
          this.loading = false
          this.sureloading = false
        })
    },

    IndividualEditorCorp() {
      this.sureloading = true
      IndividualEditorCorp(this.form)
        .then((res) => {
          this.$router.push({ name: 'Multimediamaterial', query: { is_person: this.$route.query.is_person } })
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          this.loading = false
          this.sureloading = false
        })
        .catch(() => {
          this.$message.error({
            message: '编辑失败'
          })
          this.loading = false
          this.sureloading = false
        })
    },
    // 没改完的数据
    preserve(form) {
      this.sureloading = true
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.form.checked) {
            if (this.$route.query.id) {
              this.$route.query.corp ? this.IndividualEditorCorp() : this.IndividualEditor()
            } else {
              this.creatingMultimedia()
            }
          } else {
            if (this.$route.query.id) {
              this.$route.query.corp ? this.IndividualEditorCorp() : this.IndividualEditor()
            } else {
              this.creatingMultimedia()
            }
          }
        } else {
          return false
        }
      })
    },
    synchronization(checked) {
      if (checked) {
        this.form.isSync = '0'
        this.form.checked = false
      } else {
        this.form.isSync = '1'
        this.form.checked = true
      }
    },
    //企业列表
    multimediaGroup() {
      this.loading = true
      const data = {
        levelType: 0,
        mediaType: this.form.mediaType
      }
      multimediaGroup(data)
        .then((res) => {
          if (res.code === 200) {
            this.Enterprisegrouping = res.data
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    multimediaGroups() {
      this.loading = true
      const data = {
        levelType: 1,
        mediaType: this.form.mediaType
      }
      multimediaGroup(data)
        .then((res) => {
          if (res.code === 200) {
            this.Individualgroup = res.data
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    openbuton() {
      if (this.$route.query.id) {
        this.$router.push({
          name: 'Multimediamaterial',
          query: { is_person: this.$route.query.is_person }
        })
      } else {
        this.$router.push({
          name: 'Multimediamaterial',
          query: { is_person: this.$route.query.is_person }
        })
      }
    },
    creatingMultimedia() {
      this.loading = true
      this.sureloading = true
      creatingMultimedia(this.form)
        .then((res) => {
          this.$router.push({ name: 'Multimediamaterial', query: { is_person: this.$route.query.is_person } })
          this.$message({
            message: '创建成功',
            type: 'success'
          })
          this.loading = false
          this.sureloading = false
        })
        .catch(() => {
          this.$message.error({
            message: '创建失败'
          })
          this.loading = false
          this.sureloading = false
        })
    },
    beforeUpload(file) {
      this.loading = true
      let formData = new FormData()
      formData.append('file', file)
      this.form.materialUrl = ''
      uploadInterface(formData)
        .then((res) => {
          if (res.code == 200) {
            this.form.fileSize = res.data.fileSize
            this.form.materialUrl = res.data.url
            this.form.imgUrl = this.domain + res.data.url
            this.form.fileName = res.data.fileName
          }
          this.appear = false
          this.loading = false
        })
        .catch(() => {
          this.form.materialUrl = ''
          this.loading = false
        })
      return false
    },
    uploadVideo(file) {
      let formData = new FormData()
      formData.append('file', file)
      this.form.materialUrl = ''
      videoInterface(formData)
        .then((res) => {
          if (res.code == 200) {
            this.form.fileSize = res.data.fileSize
            this.form.materialUrl = res.data.url
            this.form.imgUrl = this.domain + res.data.url
            this.form.fileName = res.data.fileName
          }
          this.appear = false
        })
        .catch(() => {
          this.form.materialUrl = ''
          this.loading = false
        })
      return false
    },
    audioUpload(file) {
      this.loading = true
      let formData = new FormData()
      formData.append('file', file)
      this.form.materialUrl = ''
      audioInterface(formData)
        .then((res) => {
          if (res.code == 200) {
            this.form.fileSize = res.data.fileSize
            this.form.materialUrl = res.data.url
            this.form.imgUrl = this.domain + res.data.url
            this.form.fileName = res.data.fileName
          }
          this.appear = false
          this.loading = false
        })
        .catch(() => {
          this.form.materialUrl = ''
          this.loading = false
        })
      return false
    }
  },
  mounted() {
    this.multimediaGroups()
    this.multimediaGroup()
    if (this.$route.query.id) {
      this.Multimedia = '编辑多媒体'
      this.createAccess()
    }
  }
}
</script>
<style lang="scss" scoped>
.creatingMultimedia {
  width: 100%;
  height: 100%;
  padding: 20px;
  border-radius: 6px;

  .creatingMultimedia_top {
    .text {
      color: rgba(16, 16, 16, 1);
      font-size: 20px;
    }

    display: flex;
    justify-content: space-between;
    text-align: right;
    margin-right: 20px;
    margin-bottom: 16px;
    padding-right: 20px;
    padding-left: 20px;
    height: 70px;
    line-height: 70px;
    width: 100%;
    background-color: white;
    border-radius: 6px;
  }

  .creatingMultimedia_content {
    width: 100%;
    border-radius: 6px;
    padding-top: 20px;
    height: 100%;
    background-color: white;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid #d9d9d9;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
